<template>
	<!-- 弹出层 -->
	<uni-popup ref="popup" type="bottom" :is-mask-click="false" @change="change">
		<view v-if="cartList&&cartList.length>0" class="cart-popup">
			<!-- 关闭按钮 -->
			<view class="close-btn" @click="close" style="z-index: 40;">
				<uni-icons type="closeempty" size="22" color="#ff5a5f"></uni-icons>
			</view>
			<view class="title">
				<text>{{isStatement?'生成结算单':title}}</text>
			</view>
			<!-- 商品列表 -->
			<scroll-view class="cart-list" scroll-y>
				<view v-if="isStatement">
					<view class="statement-item">
						<view class="statement-no">
							<text>序号</text>
						</view>
						<view class="statement-name">
							<text>名称</text>
						</view>
						<view class="statement-number">
							<text>数量</text>
						</view>
						<view class="statement-price price">
							<text>单价</text>
						</view>
					</view>
					<view v-for="(item,index) in statementDetailList" class="statement-item" :key="item._id">
						<view class="statement-no">
							<text>{{index+1}}</text>
						</view>
						<view class="statement-name name">
							<text>{{item._id===''?'**'+item.name:item.name}}</text>
						</view>
						<view class="statement-number">
							<text>{{item.number}}</text>
						</view>
						<view class="statement-price price">
							<text>{{item.amount}}</text>
						</view>
					</view>
					<view v-if="isAdjust" class="statement-item">
						<view class="statement-no">
							<text>{{statementDetailList.length+1}}</text>
						</view>
						<view class="statement-name">
							<input class="adjust-name" v-model="adjustData.name" @confirm="handleAdjust"
								:class="{'adjust':isAdjust}" />
						</view>
						<view class="statement-number">
							<input class="adjust-number" v-model.number="adjustData.number" @confirm="handleAdjust"
								:class="{'adjust':isAdjust}" />
						</view>
						<view class="statement-price">
							<input class="adjust-price" focus v-model.number="adjustData.amount" @confirm="handleAdjust"
								:class="{'adjust':isAdjust}" />
						</view>
					</view>
					<view class="statement-amount">
						<text class="amount-label">应收金额：</text>
						<text class="amount-tag">￥</text>
						<text class="amount">{{statementSubmitForm.amount}}</text>
					</view>
					<view class="statement-pay-amount">
						<text class="amount-label">实收金额：</text>
						<text class="amount-tag">￥</text>
						<input :disabled="isAdjust" class="amount-input" v-model.number="statementSubmitForm.payAmount"
							:class="{'focused-input': isFocusedAdjust}" @focus="isFocusedAdjust=true" @blur="isFocusedAdjust=false" />
						<text v-if="!isAdjust" class="amount-describe">(可点击输入)</text>

					</view>
					<view class="payMethod">
						<text class="payMethod-lable">支付方式：</text>
						<text class="payMethod-item" :class="{'active':item.value===selectedPayMethod}"
							v-for="(item,index) in payMethodList" :key="index"
							@click="selectedPayMethod=item.value">{{item.label}}</text>
					</view>
					<view class="statement-remark">
						<text class="remark">
							备注：
						</text>
						<view class="remark-input">
							<textarea :disabled="isAdjust" v-model="statementSubmitForm.remark" placeholder-style="color:#999"
								placeholder="备注长度不能大于100字" />
						</view>
					</view>
					<view class="describe">
						<text>说明：名称前带 ** 的是调整项，每个结算单只能有一个调整项</text>
					</view>
				</view>
				<view v-else>
					<view v-for="(item, index) in cartList" :key="item.name+index" class="cart-item">
						<!-- 单选复选框 -->
						<checkbox-group @change="toggleSelect(item)">
							<label>
								<view v-if="title && title==='待下单'">
									<checkbox :checked="item.selected===1" class="custom-checkbox" />
								</view>
								<view v-else>
									{{index+1}}
								</view>
							</label>
						</checkbox-group>
						<!-- 菜品信息 -->
						<view class="item-info">
							<view class="name-price">
								<text class="name">{{ item.name }}</text>
								<view v-if="title && title==='待下单'" class="price">
									<text>¥</text>{{ item.amount }}
								</view>
							</view>
							<view class="flavor-box">
								<text class="flavor">{{ item.dishFlavor }}</text>
								<view v-if="title && title==='已下单'">
									<text style="color: #666;">×{{item.number}}</text>
								</view>
							</view>
						</view>
						<!-- 数量操作 -->
						<view v-if="title && title==='待下单'" class="item-actions">
							<image class="btn-minus" src="/static/minus2.svg" @click="decreaseQuantity(item,index)" />
							<text class="quantity">{{ item.number }}</text>
							<image class="btn-plus" src="/static/plus1.svg" @click="increaseQuantity(item)" />
						</view>
						<view v-if="title && title==='已下单'" class="item-status" @click="cancelOrder(item,index)"
							:style="{backgroundColor:statusList[item.status??0].backgroundColor}">
							<text :style="{color:statusList[item.status??0].color}">{{statusList[item.status??0].label}}</text>
						</view>
					</view>
				</view>
			</scroll-view>

			<!-- 底部结算栏 -->
			<view v-if="title && title==='待下单'" class="checkout-footer">
				<!-- 全选按钮 -->
				<view class="select-all">
					<checkbox-group @change="toggleSelectAll">
						<label>
							<checkbox :checked="isAllSelected" class="custom-checkbox" /> 全选({{selectedCount}}/{{cartList.length}})
						</label>
					</checkbox-group>
				</view>
				<view class="total-price">
					<text class="price-title">总价</text>
					<text class="tip">¥</text>
					<text class="amount">{{ totalPrice }}</text>
				</view>
				<button size="mini" :style="{color: !isPermitted ? '#dfd7d7' : '#fff'}" class="checkout-btn"
					@click="handleCheckout">下单</button>
			</view>
			<view v-if="title && title==='已下单' && !isStatement" class="checkout-footer">
				<view class="footer">
					<view class="footer-amount">
						<text class="estimate">预估：</text>
						<text class="footer-tip">￥</text>
						<text class="amount">{{cartList.reduce((acc,cur)=>acc+cur.number*cur.amount,0)}}</text>
					</view>
					<text v-if="cartList.filter(item => item.status < 3).reduce((acc, cur) => acc + cur.number, 0)!==0"
						class="footer-describe">
						未上菜：{{cartList.filter(item => item.status < 3).reduce((acc, cur) => acc + cur.number, 0)}}份，
						已完成：{{cartList.filter(item => item.status === 3).reduce((acc, cur) => acc + cur.number, 0)}}份。
					</text>
					<text v-else class="footer-describe">
						菜已上齐，请您慢用！
					</text>
				</view>
				<button size="mini" class="checkout-btn" @click="handlePay">去买单</button>
			</view>
			<view v-if="title && title==='已下单' && isStatement" class="checkout-footer-button">
				<view class="button-box">
					<button class="default" @click="closeStatement">返回</button>
					<button class="warnnig" @click="handleAdjust">{{isAdjust?'保存调整':'调整'}}</button>
					<button v-if="!isAdjust" class="primary" @click="submitStatement">提交</button>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';
	import {
		postUserOrderSubmitApi,
		putUserShoppingCartSelectAllApi,
		putUserShoppingCartUpdateApi,
		getUserShopStatusApi,
		postUserUserStatementSubmitApi
	} from '../api/user';
	import {
		mergeStatementDetail
	} from '../utiles/user';
	import {
		putAdminOrderDetailUpdateApi
	} from '../api/admin';

	const props = defineProps({
		turnoverId: {
			type: String,
			required: true
		},
		turnoverNumber: {
			type: String,
			required: true
		},
		orderIds: {
			type: Array,
			required: true
		},
		isPermitted: {
			type: Boolean,
			required: true, // 必传参数
			default: false // 默认值为空函数
		},
		cartList: {
			type: Array,
			required: true,
		},
		getListData: {
			type: Function, // 参数类型为函数
			required: true, // 必传参数
		},
		changeCartPopup: {
			type: Function,
			required: true,
			default: (e) => {}
		}
	});

	const isFocusedAdjust = ref(false)
	const title = ref('')
	const popup = ref(null)
	const statusList = [{
		value: 0,
		label: '取消',
		color: '#fff',
		backgroundColor: '#ff5a5f'
	}, {
		value: 1,
		label: '加工中',
		color: '#000',
		backgroundColor: '#e0e5df'
		// backgroundColor: '#b5c4b1'
	}, {
		value: 2,
		label: '待传菜',
		color: '#fff',
		backgroundColor: '#96a48b'
	}, {
		value: 3,
		label: '已完成',
		color: '#fff',
		backgroundColor: '#1685a9'
	}]

	const payMethodList = ref([{
			value: 1,
			label: '微信',
		},
		{
			value: 2,
			label: '支付宝',
		},
		{
			value: 3,
			label: '现金',
		},
		{
			value: 4,
			label: 'POS机',
		},
		{
			value: 5,
			label: '闪付',
		},
		{
			value: 6,
			label: '其他',
		}
	])

	// 增加数量
	const increaseQuantity = (item) => {
		putUserShoppingCartUpdateApi({
			id: item._id,
			number: item.number + 1
		}).then(() => {
			item.number++
		})
	};

	// 减少数量
	const decreaseQuantity = async (item, index) => {
		if (item.number === 1) {
			const res = await uni.showModal({
				title: '提示',
				content: `${item.name} 只剩1件，你是要从列表中删除这个菜品吗？`,
			})
			if (res.cancel) {
				return
			}
		}
		await putUserShoppingCartUpdateApi({
			id: item._id,
			number: item.number - 1
		})
		if (item.number === 1) {
			props.cartList.splice(index, 1)
			if (!props.cartList || props.cartList.length == 0) {
				close()
			}
		} else {
			item.number--
		}
	};

	// 切换单选状态
	const toggleSelect = async (item) => {
		console.log('单选点击：', item);
		await putUserShoppingCartUpdateApi({
			id: item._id,
			selected: item.selected === 0 ? 1 : 0
		})
		item.selected = item.selected === 0 ? 1 : 0
	};

	// 切换全选状态
	const toggleSelectAll = (event) => {
		const isSelected = event.detail.value.length > 0;
		putUserShoppingCartSelectAllApi({
			ids: props.cartList.map(item => item._id),
			selected: isSelected ? 1 : 0
		}).then(res => {
			props.cartList.forEach(item => item.selected = isSelected ? 1 : 0)
		})
	};
	// 计算总价
	const totalPrice = computed(() => {
		return props.cartList
			.filter((item) => item.selected === 1)
			.reduce((total, item) => total + item.amount * item.number, 0)
			.toFixed(2);
	});

	// 计算选中数量
	const selectedCount = computed(() => {
		return props.cartList.filter((item) => item.selected === 1).length;
	});

	// 判断是否全选
	const isAllSelected = computed(() => {
		return props.cartList.every((item) => item.selected === 1);
	});

	// 下单
	const handleCheckout = async () => {
		if (!props.turnoverId) {
			uni.showToast({
				title: '请重新扫码登录',
				icon: 'error'
			})
			uni.reLaunch({
				url: '/pages/index/index'
			})
			return
		}

		const res = await getUserShopStatusApi()
		if (res === 0) {
			const res = await uni.showModal({
				title: '提示',
				content: '对不起，本店已打烊，暂时无法下单，有事请联系店员！',
				showCancel: false,
				confirmText: '知道了'
			})
			return
		}

		if (!props.isPermitted) {
			const res = await uni.showModal({
				title: '提示',
				content: '您不能下单，请用提交就餐人数的手机下单，如果不知道请联系服务员',
				showCancel: false,
				confirmText: '知道了'
			})
			return
		}

		const selectedItems = props.cartList.filter((item) => item.selected);
		if (selectedItems.length === 0) {
			uni.showToast({
				title: '请选择菜品',
				icon: 'none',
			});
			return;
		}

		let selectedContent = ''
		selectedItems.forEach(item => {
			if (item.dishFlavor) {
				selectedContent += item.name + "(" + item.dishFlavor + ")" + "×" + item.number + ",\n"
			} else {
				selectedContent += item.name + "×" + item.number + ",\n"
			}
		})
		selectedContent = `共 ${selectedItems.reduce((acc,cur)=>acc+cur.number,0)} 件商品：\n${selectedContent}您确定要下单吗？`

		const res1 = await uni.showModal({
			tilt: '提示',
			content: selectedContent,
			confirmText: "下单",
			cancelText: "再想想",
		});
		if (res1.cancel) {
			return
		}

		const orderFormData = {
			amount: selectedItems.reduce((acc, cur) => acc + cur.number * cur.amount, 0),
			turnoverId: props.turnoverId,
			shoppingCartList: selectedItems,
		}
		const {
			sellOutList
		} = await postUserOrderSubmitApi(orderFormData)
		if (sellOutList) {
			await uni.showModal({
				title: '提示',
				content: `${sellOutList} 已售罄，请重新选择再下单`,
				showCancel: false
			})
			props.getListData('有售罄')
			return
		}
		await uni.showModal({
			title: '提示',
			content: `${selectedItems.reduce((acc,cur)=>acc+cur.number,0)} 件商品下单成功，正在加紧为您准备中，请耐心等待...`,
			showCancel: false,
			confirmText: '知道了'
		})
		props.getListData("下单成功")
	};

	const cancelOrder = async (item, index) => {
		const userInfo = wx.getStorageSync("userInfo") || {}
		if (userInfo.job === '管理员' || userInfo.job === '收银员') {
			let itemList = []
			if (item.status === 0) {
				itemList = ['改为已取消', '改为已完成', '改为待上菜', '改为加工中']
			} else if (item.status === 1) {
				itemList = ['改为已取消', '改为已完成', '改为待上菜']
			} else if (item.status === 2) {
				itemList = ['改为已取消', '改为已完成']
			} else if (item.status === 3) {
				itemList = ['改为已取消']
			} else {
				return
			}
			const dishFlavor = item.dishFlavor ? '(' + item.dishFlavor + ')' : ''
			const title = `当前菜品 ${item.name}${dishFlavor} 更改状态`
			const res = await uni.showActionSheet({
				title,
				itemList
			});
			const status = res.tapIndex === 0 ? 4 : res.tapIndex === 1 ? 3 : res.tapIndex === 2 ? 2 : 1
			console.log(res.tapIndex);
			await putAdminOrderDetailUpdateApi({
				orderId: item.orderId,
				id: item._id,
				status
			})
			item.status = status
			if (status === 4) {
				props.cartList.splice(index, 1)
				if (props.cartList.length === 0) {
					close()
				}
			}
			return
		}

		if (item.status !== 0) {
			return
		}

		const res = await uni.showModal({
			title: '提示',
			content: `您是要取消${item.number===1?'':' 1份'} ${item.name}${item.dishFlavor?'('+item.dishFlavor+')':''} 吗？`
		})
		if (res.cancel) {
			return
		}

		await putAdminOrderDetailUpdateApi({
			id: item._id,
			status: 4
		})

		props.cartList.splice(index, 1)

		if (!props.cartList || props.cartList.length === 0) {
			close()
		}

		uni.showToast({
			title: '取消成功'
		})
	}

	const statementSubmitForm = ref({
		number: '',
		turnoverId: undefined,
		turnoverNumber: undefined,
		payMethod: 1,
		amount: 0,
		payAmount: 0,
		remark: '',
		createUserName: '',
		orderIds: [],
	})
	const isStatement = ref(false)
	const statementDetailList = ref([])
	const isAdjust = ref(false)
	const adjustData = ref({
		name: '',
		number: 0,
		amount: 0
	})
	const selectedPayMethod = ref(1)

	const resetFormData = () => {
		statementSubmitForm.value = {
			number: '',
			turnoverId: undefined,
			turnoverNumber: undefined,
			payMethod: 1,
			amount: 0,
			payAmount: 0,
			remark: '',
			createUserName: '',
			orderIds: [],
		}
		isStatement.value = false
		statementDetailList.value = []
		isAdjust.value = false
		adjustData.value = {
			name: '',
			number: 0,
			amount: 0
		}
		selectedPayMethod.value = 1
	}

	const handlePay = () => {
		resetFormData()
		const userInfo = wx.getStorageSync("userInfo") || {}
		if (userInfo.job === '管理员' || userInfo.job === '收银员') {
			for (const item of props.cartList) {
				if (item.status != 3) {
					uni.showModal({
						content: '有未完成订单，不能结账',
						showCancel: false
					})
					return
				}
			}
			statementSubmitForm.value.createUser = userInfo.empId
			statementSubmitForm.value.createUserName = userInfo.name
			statementDetailList.value = mergeStatementDetail(props.cartList)
			statementSubmitForm.value.amount = statementSubmitForm.value.payAmount = statementDetailList.value.reduce((acc,
				cur) => acc + cur.number * cur.amount, 0)

			isStatement.value = true
		} else {
			uni.showModal({
				title: '提示',
				content: "该功能尚未开通，买单请去吧台！",
				showCancel: false,
				confirmText: '知道了'
			})
		}
	}

	const closeStatement = () => {
		resetFormData()
		isStatement.value = false
	}

	const handleAdjust = () => {
		if (isAdjust.value) {
			adjustData.value.name = adjustData.value.name.trim()
			if (!adjustData.value.name) {
				uni.showToast({
					title: '名称不能为空',
					icon: 'none'
				})
				return
			}
			isAdjust.value = false
			if (adjustData.value.number !== 0 && adjustData.value.amount !== 0) {
				statementDetailList.value.push({
					_id: '',
					name: adjustData.value.name,
					number: adjustData.value.number,
					amount: adjustData.value.amount
				})
			}
			statementSubmitForm.value.amount = statementSubmitForm.value.payAmount = statementDetailList.value.reduce((acc,
				cur) => acc + cur.number * cur.amount, 0)
		} else {
			if (statementDetailList.value[statementDetailList.value.length - 1]._id === '') {
				adjustData.value = statementDetailList.value.pop()
			} else {
				adjustData.value = {
					name: '退货',
					number: -1,
					amount: 0
				}
			}
			isAdjust.value = true
		}
	}

	const submitStatement = async () => {
		if (isAdjust.value) {
			uni.showToast({
				title: '请先点完成调整',
				icon: 'none'
			})
			return
		}
		statementSubmitForm.value.remark = statementSubmitForm.value.remark.trim()
		if (statementSubmitForm.value.remark && statementSubmitForm.value.remark.length > 100) {
			uni.showToast({
				title: '备注长度不能超过100',
				icon: 'none'
			})
			return
		}

		statementSubmitForm.value.turnoverNumber = props.turnoverNumber
		statementSubmitForm.value.orderIds = props.orderIds
		statementSubmitForm.value.number = Date.now() + '-' + Math.random().toString(36).slice(2, 4).toUpperCase()
		statementSubmitForm.value.turnoverId = props.turnoverId
		statementSubmitForm.value.payMethod = selectedPayMethod.value
		const res = await uni.showModal({
			content: `当前账单应收款为：${statementSubmitForm.value.amount},\n实收款为：${statementSubmitForm.value.payAmount},\n你确定要买单吗?`,
			confirmText: '买单',
			cancelText: '再等等'
		})
		if (res.cancel) {
			return
		}
		isStatement.value = false
		if (statementDetailList.value[statementDetailList.value.length - 1]._id === '') {
			statementSubmitForm.value.remark = statementSubmitForm.value.remark + ',调整：' + adjustData.value.name + '*' +
				adjustData.value.number + '*' + adjustData.value.amount
		}
		const res1 = await postUserUserStatementSubmitApi(statementSubmitForm.value)
		props.getListData('下单成功')
		await uni.showModal({
			content: '买单成功',
			showCancel: false,
			confirmText: '知道了'
		})
	}

	const change = (e) => {
		props.changeCartPopup(e.show)
		console.log("组件内部的change:", e);
	}

	// 打开弹出层
	const open = async (str) => {
		await props.getListData()
		console.log('open方法：', props.cartList);
		title.value = str
		if (!props.cartList.length) {
			await uni.showModal({
				title: '提示',
				content: str === '待下单' ? '请先选择菜品' : '没有已下单商品，请先下单',
				showCancel: false
			})
			props.changeCartPopup(false)
			return
		}
		popup.value.open();
	};

	// 关闭弹出层
	const close = () => {
		title.value = ''
		popup.value.close();
	};

	// 暴露方法
	defineExpose({
		open,
		close
	});
</script>

<style lang="scss" scoped>
	.focused-input {
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	}

	.cart-popup {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		max-height: 80vh; // 最大高度
		background-color: #fff;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		position: relative;

		.close-btn {
			position: absolute;
			top: 10rpx;
			right: 20rpx;
			width: 80rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #666;
			z-index: 10;
		}

		.title {
			display: flex;
			justify-content: center;
			width: 100%;
			padding: 30rpx 0 30rpx;
			background-color: #fff;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			box-shadow: 0 3rpx 4rpx rgba(0, 0, 0, 0.14);
			z-index: 30;


			text {
				font-size: 40rpx;
				font-weight: 700;
				color: #666;
			}
		}

		.cart-list {
			flex: 1;
			overflow-y: auto; // 超出内容滚动

			.statement-item {
				box-sizing: border-box;
				display: flex;
				flex-direction: row;
				text-align: center;
				width: 100%;
				line-height: 70rpx;
				color: #999;
				padding: 20rpx 60rpx 20rpx 40rpx;
				border-bottom: 1rpx solid #eee;

				.statement-no {
					width: 14%;
				}

				.statement-name {
					width: 42%;
				}

				.name {
					text-align: left;
				}

				.statement-number {
					width: 14%;
				}

				.statement-price {
					width: 30%;
				}

				.price {
					text-align: right;
				}

				.adjust-name {
					text-align: left;
				}

				.adjust-number {
					text-align: center;
					margin: 0 5rpx;
				}

				.adjust-price {
					text-align: right;
					padding-right: 5rpx;
				}

				.adjust {
					background-color: #f5f5f5;
					border: 1rpx solid #eee;
					border-radius: 5rpx;
					padding: 10rpx;
				}
			}

			.statement-amount,
			.statement-pay-amount {
				display: flex;
				flex-direction: row;
				align-items: baseline;
				margin: 50rpx 40rpx;

				.amount-label {
					font-size: 32rpx;
					color: #666;

				}

				.amount-tag {
					font-size: 24rpx;
					color: #f40;
				}

				.amount {
					font-size: 40rpx;
					color: #f40;
				}

				.amount-describe {
					font-size: 28rpx;
					color: #ccc;
					margin-left: 20rpx;
				}

				.amount-input {
					border: 1px solid #ddd;
					font-size: 40rpx;
					height: 60rpx;
					width: 140rpx;
					color: #999;
					text-align: center;
					background-color: #f9f9f9;
					margin: 0 5rpx;
					border-radius: 8rpx;
				}

			}

			.payMethod {
				display: flex;
				flex-direction: row;
				margin: 80rpx 40rpx;
				align-items: baseline;

				.payMethod-lable {
					font-size: 32rpx;
					margin-right: 5rpx;
					color: #666;
				}

				.payMethod-item {
					box-sizing: border-box;
					font-size: 24rpx;
					color: #666;
					border: 1px solid #ddd;
					border-right: none;
					background-color: #f9f9f9;
					width: 82rpx;
					text-align: center;
					line-height: 70rpx;
				}

				.payMethod-item:nth-child(2) {
					border-radius: 8rpx 0 0 8rpx;
				}

				.payMethod-item:last-child {
					border-radius: 0 8rpx 8rpx 0;
					border-right: 1px solid #ccc;
				}

				.payMethod-item:not(:last-child) {
					border-right: none;
				}

				.active {
					background-color: #ffb61e;
					color: #fff;
					border: 1px solid #ffb61e;
					overflow: hidden;
				}

			}

			.statement-remark {
				display: flex;
				margin: 30rpx 40rpx;

				.remark {
					font-size: 32rpx;
					color: #666;
					width: 18%;
					text-align: left;

				}

				.remark-input {
					background-color: #f9f9f9;
					border: 1px solid #ddd;
					height: 120rpx;
					width: 82%;
					border-radius: 8rpx;
					padding: 5rpx;
				}

			}

			.describe {
				font-size: 24rpx;
				color: #999;
				margin-left: 40rpx;
			}



			.cart-item {
				display: flex;
				align-items: center;
				height: 120rpx;
				padding: 20rpx 40rpx;
				border-bottom: 1rpx solid #eee;
				background-color: #ffffff;

				.item-info {
					flex: 1;
					display: flex;
					flex-direction: row;
					margin-left: 20rpx;

					.name-price {
						display: flex;
						flex-direction: column;
						width: 100px;
						align-self: center;

						.name {
							font-size: 32rpx;
							font-weight: 600;
							color: #666;
						}

						.price {
							font-size: 28rpx;
							color: #f40;

							text {
								font-size: 20rpx;
								color: #f40;
							}
						}
					}

					.flavor-box {
						display: flex;
						align-items: center;
						margin-left: 10rpx;
						width: 100%;
						flex: 1;

						.flavor {
							display: block;
							font-size: 28rpx;
							white-space: normal; // 允许换行
							display: -webkit-box; // 弹性盒子布局
							-webkit-line-clamp: 3; // 限制显示两行
							-webkit-box-orient: vertical; // 垂直排列
							overflow: hidden; // 超出部分隐藏
							text-overflow: ellipsis; // 超出部分显示省略号
							color: #999;
						}
					}
				}

				.item-actions {
					display: flex;
					align-items: center;
					margin-left: 10rpx;
					border: 1rpx solid #ff5a5f;
					border-radius: 10rpx;

					.btn-minus,
					.btn-plus {
						width: 45rpx;
						height: 45rpx;
						border: 1rpx solid #ff5a5f;
						background-color: #ff5a5f;
						color: #fff;
					}

					.quantity {
						width: 45rpx;
						font-size: 28rpx;
						text-align: center;
					}
				}

				.item-status {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 135rpx;
					height: 60rpx;
					border-radius: 30rpx;

					text {}
				}
			}
		}

		.checkout-footer {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: 60px;
			padding: 0 40rpx;
			background-color: #fafafa;
			box-sizing: border-box;
			box-shadow: 0 -2px 3px rgba(0, 0, 0, 0.1);
			z-index: 30;

			.select-all {
				// padding: 20rpx 0;
			}

			.total-price {
				flex: 1;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: baseline;

				.price-title {
					font-size: 25rpx;
					color: #666;
					margin-right: 10rpx;
				}

				.tip {
					font-size: 20rpx;
					color: red;
				}

				.amount {
					font-size: 40rpx;
					color: red;
				}
			}

			.checkout-btn {
				background-color: #ff5a5f;
				color: #fff;
				font-size: 32rpx;
				border-radius: 50rpx;
				padding: 0 50rpx;
			}

			.footer {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				height: 50px;

				.footer-amount {

					.estimate {
						color: #666;
						font-size: 26rpx;
						margin: 0 10rpx;
					}

					.footer-tip {
						color: red;
						font-size: 22rpx;
					}

					.amount {
						color: red;
						font-size: 40rpx;
					}

				}

				.footer-describe {
					font-size: 24rpx;
					color: #999;
				}
			}
		}
	}

	.checkout-footer-button {
		display: flex;
		flex-direction: row;
		justify-content: center;
		width: 100%;
		padding: 20rpx;
		border-top: 1px solid #eee;
		background-color: #f9f9f9;

		.button-box {
			display: flex;
			flex-direction: row;
			gap: 10rpx;

			button {
				padding: 0rpx 80rpx;
				border-radius: 60rpx;

			}

			.default {
				color: #999;
				background-color: #eee;
			}

			.warnnig {
				background-color: #ffb61e;
				color: #fff;
			}

			.primary {
				background-color: #ff5a5f;
				color: #fff;
			}
		}
	}
</style>